<template>
  <div>
    <el-button type="primary" @click="add">新增</el-button>
    <el-button type="primary" @click="removes">批量删除</el-button>
    <el-icon :size="20">
      <Edit />
    </el-icon>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="Date" />
      <el-table-column prop="goodsAddress" label="Name" />
      <el-table-column label="Address">
        <template #default="scope">
          <img :src="scope.row.goodsImg" alt="" style="width: 50px" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import news from "@/mock/news.js";
// import { Edit } from "@element-plus/icons-vue";
const tableData = ref([]);
let selectedVal = [];

onMounted(() => {
  getData();
});

const getData = async () => {
  const res = await news.getData({
    pageSize: 10,
    currentPage: 1,
  });
  tableData.value = res.list;
};

const remove = (row) => {
  console.log(row);
};

const add = async () => {
  const res = await news.addData({
    goodsClass: "女装123",
    goodsId: 2222,
    goodsName: "取合务",
    name: "邵艳",
    goodsAddress: "云南省 怒江傈僳族自治州 其它区",
  });
  if (res.status === 0) {
    getData();
  }
};

const handleSelectionChange = (val) => {
  // console.log(val);
  selectedVal = val;
};

const removes = () => {
  // console.log(selectedVal);
  const ids = selectedVal.map((item) => item.goodsId);
  news.delDatas({
    ids: ids,
  });
};
</script>
